import React, { Component } from "react";
import { Route } from "react-router-dom";
import MyNavLink from "../../../components/MyNavLink";
import Detail from "./Detail/index";

const mesList = [
  {
    id: "001",
    title: "message1"
  },
  {
    id: "002",
    title: "message2"
  },
  {
    id: "003",
    title: "message3"
  }
];
export default class Message extends Component {
  render() {
    return (
      <React.Fragment>
        <ul>
          {mesList.map(v => {
            return (
              // 1.向路由组件传递params参数
              // <li key={v.id}>
              //   <MyNavLink to={`/home/message/detail/${v.id}/${v.title}`}>
              //     {v.title}
              //   </MyNavLink>
              // </li>
              //  2.向组件传递search参数
              // <li key={v.id}>
              //   <MyNavLink
              //     to={`/home/message/detail?id=${v.id}&title=${v.title}`}
              //   >
              //     {v.title}
              //   </MyNavLink>
              // </li>
              <li key={v.id}>
                <MyNavLink
                  to={{
                    pathname: "/home/message/detail",
                    state: {
                      id: v.id,
                      title: v.title
                    }
                  }}
                >
                  {v.title}
                </MyNavLink>
              </li>
            );
          })}
        </ul>
        <div style={{ marginTop: "50px" }}>
          {/* 1.声明接收params参数 */}
          {/* <Route
            path="/home/message/detail/:id/:title"
            component={Detail}
          ></Route> */}
          {/* 2.声明接收search参数 */}
          <Route path="/home/message/detail" component={Detail}></Route>
        </div>
      </React.Fragment>
    );
  }
}
